export default class SocketService {
    /**
     * 单例设计模式
     */
    static instace = null
    static get Instace() {
        if (!this.instace) {
            this.instace = new SocketService()
        }
        return this.instace
    }

    // 和服务端连接的socket对象
    ws = null

    // 存储回调函数
    callBackMapping = {}

    // 标识是否连接成功
    connected = false

    // 记录重试的次数
    sendRetryCount = 0

    // 重新连接尝试的次数
    connectRetryCount = 0

    // 定义连接服务器的方法,需要在main中调用这个方法
    connect() {
        // 连接服务器
        // 判断浏览器支不支持websocket
        // if (!Window.WebScket) {
        //     return alert('您的浏览器不支持websocket')
        // }
        if (!window.WebSocket) {
            return console.log('您的浏览器不支持WebSocket')
          }
        // 连接服务器的过程
        this.ws = new WebSocket('ws://localhost:9998')

        // 连接成功的事件
        this.ws.onopen = () => {
            console.log('连接服务端成功了');
            this.connected = true
            this.connectRetryCount = 0
        }

        // 1.连接服务端失败
        // 2.当连接成功之后，服务器关闭的情况
        this.ws.onclose = () => {
            console.log('连接服务端失败');
            this.connected = false
            this.connectRetryCount++
            setTimeout(()=> {
                this.connect()
            },500 * this.connectRetryCount)
        }
        // 得到服务端发送过来的数据
        this.ws.onmessage = msg => {
            console.log('从服务端获取到了数据');
            // 真正服务端发过来的原始数据时在msg中的data字段
            // console.log(msg.data);
            const recvData = JSON.parse(msg.data)
            const socketType = recvData.socketType
            // 判断回调函数是否存在
            if(this.callBackMapping[socketType]){
                const action = recvData.action
                if(action === 'getData') {
                    const realData = JSON.parse(recvData.data)
                    // 这里的this就是当前的SocketService类对象所调用的
                    this.callBackMapping[socketType].call(this,realData)
                } else if(action === 'fullScreen'){
                    this.callBackMapping[socketType].call(this,recvData)
                } else if(action === 'themeChange'){
                    this.callBackMapping[socketType].call(this,recvData)
                }
            }
            
        }
    }
    // 回调函数的注册
    registerCallBack(socketType,callBack) {
        this.callBackMapping[socketType] = callBack
    }

    // 取消某一个回调函数
    unRegisterCallBack(socketType){
        this.callBackMapping[socketType] = null
    }

    // 发送数据的方法
    send (data) {
        // 将对象变成字符串，再进行发送
        // 判断此时此刻有没有连接成功
        if(this.connected){
            this.sendRetryCount = 0
            this.ws.send(JSON.stringify(data))
        } else {
            this.sendRetryCount++
            setTimeout(() => {
                this.send(data)
            }, this.sendRetryCount * 500);
        }
       

    }
}